EP25

2023 iThome 鐵人賽

DAY 25

Mobile Development

Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列系列第 25 篇

15th鐵人賽 .net maui

James Tsai

2023-10-10 00:21:40

164 瀏覽

分享至

Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP25。

在完成相關的 AddOrderPage 與 AddOrderPageViewModel 處理顯示之後，要來處理 Order 資料建立的部分了~~~

既然要開始處理 Order 的資料，那也就是要開始來調整 MockData、DataService 與 IDataService 的設計。

首先，在 IDataService 增加一個 AddOrder 方法的宣告，並透過實作介面的處理幫 MockData 與 DataService 都實作好 AddOrder 方法。

在 IDataService：

int AddOrder(int personId);

完成結果如下圖：

在 DataService:

public int AddOrder(int personId)
{
    throw new NotImplementedException();
}

完成結果如下圖：

在 MockData:

public int AddOrder(int personId)
{
    var order = new Models.Order() { Id = orders.Last().Id + 1 , OrderDate = DateTime.Now, PersonId = personId };
    orders.Add(order);
    return order.Id;
}

完成結果如下圖：

PS 此 AddOrder 的方法，若是設計傳入一個 Order 的物件(已設定 PersonId 與 OrderDate 屬性值)，再由 AddOrder 賦予該 Order 的物件 Id 值也是可以的。

而在 AddOrderPageViewModel、GoodsPageViewModel、ProductDetailPageViewModel 當中，都多增加一個接收傳遞參數並設計其屬性 OrderId。

[QueryProperty(nameof(OrderId), "orderId")]

private int _orderId;

public int OrderId
{
    get { return _orderId; }
    set { _orderId = value; }
}

由於此 OrderId 不需顯示在畫面上，就不設計 ObservableProperty，設計為一般屬性的撰寫。

並找到 GoodsPageViewModel 的 Edit 方法，將其中程式碼改為如下：

var routing = $"{Shell.Current.CurrentState.Location}/ProductDetail?isEdit=false&productId={product.Id}";
routing = IsOrder ? $"{routing}&personId={PersonId}&orderId={OrderId}&isOrder=true" : routing;
await Shell.Current.GoToAsync(routing);

多增加了 OrderId 的資料傳遞。

完成結果如下圖：

在 AddOrderPageViewModel 的 Done 方法也有類似的處理：

var route = $"{Shell.Current.CurrentState.Location}/../..?" +
            $"isOrder=true&personId={OrderOwner.Id}&orderId={OrderId}";
await Shell.Current.GoToAsync(route);

完成結果如下圖：

而實質加訂單的行為會發生在 ProductDetailPage 執行 AddOrderCommand 的時候，此時會有兩種可能性：

本身還沒有訂單，是要開啟一個全新的訂單。
已經有訂購中的訂單狀態，此時加訂單是要附加到該訂購中的訂單上。

因此，要把 ProductDetailPageViewModel 的 AddOrder 改寫為以下程式：

if (OrderId == 0)
{
    OrderId = App.DataService.AddOrder(PersonId);
}
var routing = $"{Shell.Current.CurrentState.Location}/AddOrder?" +
                $"productId={EditProduct.Id}&personId={PersonId}&orderId={OrderId}";
await Shell.Current.GoToAsync(routing);

完成結果如下圖：

完成以上調整後，在發動 "下訂單" 的狀態後，在流程上經過 "加訂單" 的點選處理後，就可以順利地增加一筆新訂單；或是持續的附加商品到該筆訂單上。

點選完後，可以到 "訂單列表" 的畫面觀看此結果：
07-Android

PS 先前在處理訂單列表呈現資料時，並沒有特別額外針對資料做日期上的呈現排序，所以會看到上圖的排列是正常的。

若要調整成根據日期排序的結果，可調整 MockData 當中的 GetSummaryOrders 方法程式碼為以下內容：

var summaryOrders = (from order in orders
                        group order by order.OrderDate.Date into g
                        select new Models.SummaryOrder 
                        { Summary = g.Key, Count = g.Count() })
                        .OrderByDescending(x=>x.Summary);
return new ObservableCollection<Models.SummaryOrder>(summaryOrders);

完成結果如下圖：